<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="css/common.css" type="text/css">
    <title>forever</title>
</head>
<body>
    <div id="app">
        {{msg}} 
        <br>
        {{NewMsg}}
        <br>
        {{ otherMsg() }}
        <br>
        <a v-bind:href="Url">点我你什么都知道</a>
        <br>
        <button @Click="handleClick">点我啊</button>
        <ul>
            <li v-for="(f,index) of fruitSort">{{index+1}}-{{f.name}}-{{f.price}}</li>
        </ul>
        <ul>
            <li v-for="(u,key,index) in user">{{index+1}}-{{key}}-{{u}}</li>
        </ul>
        <img v-bind:src="imgUrl" style="height: 800px; width: 1000px;">
        <div v-model='ht'></div>
        <div :class="clsProp">
            <h1>哈哈哈啊哈哈</h1>
        </div>
        <p v-if="age===16">还没长大</p>
        <p v-else-if="age===35">年轻力壮</p>
        <p v-else>我的主宰</p>
        <template v-if="age===16">
            <p>我永远年轻</p>
        </template>
        <template v-else-if="age===35">
            <p>不在低调</p>
        </template>
        <template v-else>
            <p>我一直在</p>
        </template>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                age:'16',
                fruits:[
                    {name:'苹果',price:80},
                    {name:'香蕉',price:45},
                    {name:'火龙果',price:120},
                    {name:'菠萝',price:60},
                    {name:'橘子',price:20},
                ],
                user:{
                    userName:'悄咪咪',
                    userPwd:9968233,
                    telPhone:123456666
                },
                msg:'多喜欢你',
                ht:"<h1>哈哈</h1>",
                Url:'https://www.baidu.com',
                imgUrl:'images/timg.jpg',
                hasColor:true,
                hasNum:false,
                colorCls:'forecolor'
            },
            methods:{
                handleClick:function(){
                    console.log("点我，你快乐吗？")
                },
                otherMsg:function(){
                     return this.msg + "我的学习生涯"
            }
        },        
            filters:{
                formatString:function(val){
                    return val + "自由万岁"
                } 
            },
            computed:{
                NewMsg:function(){
                    return this.msg + "我的祖国"
                },
                bgcolorCls:function(){
                    return this.hasColor?'bgcolor':''
                },
                clsProp:function(){
                    return{
                        bgcolor:this.hasColor,
                        forecolor:this.hasNum
                    }
                },
            fruitSort:function(){
                return this.fruits.sort(function(a,b){
                    return a.price-b.price;
                })
            }
        },
            mounted:function(){
                console.log('她悄悄地走了' + new Date().toLocaleString())
            },
            created:function(){
                console.log('她悄悄地来了' + new Date().toLocaleTimeString())
            }
        })
    </script>
</body>
</html>